<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h1>ajax使用原生js实现异步更新</h1>
<div>
    <form id="register-form" autocomplete="on">
        昵称：<input id="username" type="text" name="username" placeholder="请输入昵称"/><span
            id="username_span"></span><br/>
        密码：<input id="password" type="password" name="password" placeholder="请输入密码"><br>
        <input type="submit" value="注册"/>
    </form>
</div>
</body>
<script>
    //1.为昵称input组件绑定失去焦点的事件
    document.getElementById("username").onblur = function () {
        let username = document.getElementById("username").value;
        //2.创建xmlHttpRequest对象
        let xmlHttpRequest = new XMLHttpRequest();
        //3.添加请求方式和url打开后端链接
        xmlHttpRequest.open("GET", "http://127.0.0.1:8082/user/register?username=" + username, true);
        //4.发送请求
        xmlHttpRequest.send();
        //4.处理响应的数据
        xmlHttpRequest.onreadystatechange = function () {
            if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                document.getElementById("username_span").innerHTML = xmlHttpRequest.responseText;
            } else {
                alert("出错了！");
            }
        }
    }

</script>
</html>